<template>
  <div class="friend-link-main-wapper">
    <div class="link-page-box">
      <div class="link-title">
        友情链接
      </div>
      <div class="link-list-box clear-fix">
        <div v-for="item in friendLinkList" :key="item.id" :title="item.name" class="link-item float-left">
          <a :href="item.url" target="_blank"><img :src="item.logo" class="hvr-grow"></a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getFriengLinkList } from '@/api/api'
export default {
  async asyncData () {
    const friendLinkList = await getFriengLinkList()
    return {
      friendLinkList: friendLinkList.data.records
    }
  },
  head () {
    return {
      title: 'King`s阅览室--友情链接',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'King`s 阅览室，这是个人技术博客。主要包括系统定制(AOSP),JavaWeb开发，Vue技术，前端，Java开发'
        },
        {
          hid: 'keywords',
          name: 'keywords',
          content: 'King,博客,java,vue,nuxt,开发，博客系统，程序员，程序猿'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.friend-link-main-wapper {
    max-width: 1249px;
    margin: 10px auto;
    background: #fff;
    height: 95vh;

    .link-page-box {
        text-align: center;
        padding: 0px 100px 0px;
        .clear-fix {
            overflow: hidden;
            zoom: 1;
        }
        .float-left {
            float: left;
        }
        background: #fff;
        padding: 20px;
        .link-title {
            text-align: center;
            font-size: 20px;
            color: #7f828b;
            margin-top: 10px;
            margin-bottom: 20px;
        }
        .link-item {
            // padding: 10px;
            margin: 20px;
            width: 200px;
            text-align: center;
            border: 1px solid #dfdfdf;
            cursor: pointer;
            img {
                width: 198px;
                height: 57px;
                vertical-align: middle;
            }
            &:hover {
                border: 1px solid #1e90ff;
            }
        }
    }
}
</style>>
